import FooterPage from '@components/layout/footerPage';
import {DownloadOutlined, FolderOpenTwoTone } from '@ant-design/icons';
import axios from 'axios';
import { useState } from 'react';
import { useEffect } from 'react';
import { Menu ,Breadcrumb, Tooltip} from 'antd';

const Datadownload = () => {
  const [current, setCurrent] = useState('independence');
  const [breadcrumbItems, setBreadcrumbItems] = useState([
    {
      title: '首页',
    },
    {
      title: <a>资料下载</a>,
    },
    {
      title: <a>自主课题材料</a>,
    },
  ]);
  const [autonomousdata,setautonomousdata] =  useState([]);
  const [openata,setopendata] =  useState([]);
  const [equipmentata,setequipmentdata] =  useState([]);
  const [applicationdata,setapplicationdata] =  useState([]);

  const handleClick = (e) => {
    setCurrent(e.key);// 更新组件的状态 current
            // 根据选中的菜单项更新面包屑导航文字
            const breadcrumbItems = [
              {
                title: '首页',
              },
              {
                title: <a>资料下载</a>,
              },
              {
                title: <a>{getBreadcrumbTitle(e.key)}</a>,
              },
            ];
          
            setBreadcrumbItems(breadcrumbItems); // 更新组件的状态 breadcrumbItems
    const nonshowList = document.querySelectorAll('.nonshow6');
    nonshowList.forEach((element) => {
      element.classList.remove('show');
    });
    document.getElementById(e.key).classList.add('show');

  };
  useEffect(() => {
  const fetchData = async () => {
    try {
      const dataResponse = await axios.get('http://localhost:8080/web/lab_download/list',{});
      console.log(dataResponse)
      const fileresponse = Array.from(dataResponse.data.data);
      console.log(fileresponse)

      const autonomousDataArray = fileresponse.filter(item => item.type === 0);
      setautonomousdata(autonomousDataArray);

      const openDataArray = fileresponse.filter(item => item.type === 1);
      setopendata(openDataArray);

      const equipmentDataArray = fileresponse.filter(item => item.type === 2);
      setequipmentdata(equipmentDataArray);
      // console.log(equipmentata);

      const applicationDataArray = fileresponse.filter(item => item.type === 3);
      setapplicationdata(applicationDataArray);
    } catch (error) {
      console.error(error);
    }
  };

  fetchData();
}, []);

const handlePreview = (filedownload) => {
    // 解码Base64字符串并下载文件
    const binaryData = atob(filedownload);

    const arrayBuffer = new Uint8Array(binaryData.length);
    for (let i = 0; i < binaryData.length; i++) {
      arrayBuffer[i] = binaryData.charCodeAt(i);
    }

    const blob = new Blob([arrayBuffer], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);
    window.open(url, '_blank');
};
  const handleDownload = (base64String, fileName) => {
    // 解码Base64字符串并下载文件
    const binaryData = atob(base64String);

    const arrayBuffer = new Uint8Array(binaryData.length);
    for (let i = 0; i < binaryData.length; i++) {
      arrayBuffer[i] = binaryData.charCodeAt(i);
    }

    const blob = new Blob([arrayBuffer], { type: 'application/pdf' });
    const url = URL.createObjectURL(blob);

    // 创建下载链接
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', fileName); // 设置下载文件的名称
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const getBreadcrumbTitle = (key) => {
    switch (key) { // 根据 key 值返回对应的面包屑导航文字
      case 'independence':
        return '自主课题材料';
      case 'open':
        return '开放课题材料';
      case 'apply':
        return '大型仪器设备申请';
      case 'visit':
        return '参观申请单';
      default:
        return '';
    }
  };
    return (
        <div className={'datadownload'}>
        <div className={'content06'}>
          {/*左导航*/}
          <div className={'left-box-06'}>
            <div className={'kong-02'}></div>
            <Menu  style={{fontSize:"18px",}} onClick={handleClick} selectedKeys={[current]} mode="inline">
              <Menu.Item key="independence" >自主课题材料</Menu.Item>       
              <Menu.Item key="open"  > 开放课题材料 </Menu.Item>
              <Menu.Item key="apply" >大型仪器设备申请</Menu.Item>       
              <Menu.Item key="visit" >参观申请单</Menu.Item>
            </Menu> 
          </div>
          {/*右展示框 */}
          <div className={'right-box-06'}>
            <div className={'right-top-06'}>
              <p>资料下载</p>
              <div className={'nav-path six'}>
                <span>
                  <Breadcrumb items={breadcrumbItems} />              
                </span>
              </div>
            </div>
            <div className={'nonshow6 show'} id='independence'>
              <div className='six-01'>
                <ul className='down-list'>
                    {autonomousdata.map((file) => (
                      <li>
                    <span className='down-left'onClick={() => handlePreview(file.download)}>
                      <Tooltip title="点击预览文件">
                        <FolderOpenTwoTone  style={{fontSize: '23px',cursor:'pointer'}}/>{file.name}
                      </Tooltip> 
                    </span>
                    <span className='down-right'>
                      <a  onClick={() => handleDownload(file.download, file.name)}>
                      <DownloadOutlined  style={{fontSize: '23px',}}/>
                      </a>
                    </span>                      
                    </li>
                    ))}
                </ul>
              </div>
            </div>
            <div className={'nonshow6'} id='open'>
              <div className='six-02'>
                <ul className='down-list'>
                    {openata.map((file) => (
                    <li>
                    <span className='down-left'onClick={() => handlePreview(file.download)}>
                    <Tooltip title="点击预览文件">
                        <FolderOpenTwoTone  style={{fontSize: '23px', cursor:'pointer'}} />{file.name}
                    </Tooltip> 
                    </span>
                    <span className='down-right'>
                      <a  onClick={() => handleDownload(file.download, file.name)}>
                      <DownloadOutlined  style={{fontSize: '23px',}}/>
                      </a>
                    </span>                      
                      </li>
                    ))}
                </ul>
              </div>
            </div>
            <div className={'nonshow6'} id='apply'>
              <div className='six-04'>
                <div className='equ-file'>
                {equipmentata.map((file) => (
                  <div>
                    <span className='down-left' onClick={() => handlePreview(file.download)}>
                    <Tooltip title="点击预览文件">
                        <FolderOpenTwoTone  style={{fontSize: '23px',cursor:'pointer'}}/>{file.name}
                      </Tooltip> 
                    </span>
                    <span className='down-right'>
                      <a  onClick={() => handleDownload(file.download, file.name)}>
                      <DownloadOutlined  style={{fontSize: '23px',}}/>
                      </a>
                    </span>                      
                      </div>
                    ))} 
                </div>     
              </div>
            </div>
            <div className={'nonshow6'} id='visit'>
              <div className='six-04'>
                <div className='visit-file'>
                  {applicationdata.map((file) => (
                    <div>
                        <span className='down-left' onClick={() => handlePreview(file.download)}>
                          <Tooltip title="点击预览文件">
                            <FolderOpenTwoTone  style={{fontSize: '23px',cursor:'pointer'}} />{file.name}
                          </Tooltip> 
                        </span>
                        <span className='down-right'>
                          <a  onClick={() => handleDownload(file.download, file.name)}>
                            <DownloadOutlined  style={{fontSize: '23px',}}/>
                          </a>
                        </span>                      
                    </div>
                    ))}
                </div>
              </div>
            </div>
          </div>
        </div>
        <FooterPage />
      </div>
    );
  }
export default Datadownload;